import React from 'react';
import {Button, Form, Input, message, Modal, Select, Space, Table} from "antd";
import axios from "axios";
import {ExclamationCircleOutlined} from "@ant-design/icons";
const {Column} = Table;
const { confirm } = Modal;
class ProductClass extends React.Component {
    constructor() {
        super();
        this.state = {
            data :[],
            loading: false,
            visible: false,
            visible1:false,
        };
    }

    // 对操作进行处理
    operateCell =() =>{
        return (
            <Space>
                <Button type="primary" size="small" onClick={this.showModal1}>查看</Button>
                <Button size="small" onClick={this.showModal}>修改</Button>
                <Button type="primary" size="small" danger onClick={this.Delete}>删除</Button>
            </Space>
        )
    }
    //给价格加￥
    add=(item)=>{
        item=`￥ ${item}`
        return item
    }
    // 删除

    Delete=()=>{
        confirm({
            title: '你确定要删除它吗?',
            icon: <ExclamationCircleOutlined />,
            content: '删了就没了哦',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                axios({
                    url:"http://123.57.67.148:3000/mock/249/delProduct",
                    method: "delete",
                    data:{code:20000}
                }).then(res=>{
                    console.log(res)
                    if(res.data.code===200){
                        message.success('删除成功');
                    }else {
                        message.error('删除失败');
                    }

                })
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }

    //修改



    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    handleOk = () => {
        this.setState({ loading: true });
        setTimeout(() => {
            this.setState({ loading: false, visible: false });
        }, 2000);
    };

    handleCancel = () => {
        this.setState({ visible: false });
    };
    // 查看
    handleCancel1=() =>{
        this.setState({ visible1: false });
    }

    showModal1 = () => {
        this.setState({
            visible1: true,
        });
    };




    //在这里请求数据
    componentDidMount(){
        axios({
            url:"http://123.57.67.148:3000/mock/249/selectClass",
            method:"get"

        }).then(res=>{
            console.log(res.data.data)
            this.setState({
                data:res.data.data
            })

        })
    }

    //

    render() {
        const { visible, loading } = this.state;
        const {visible1}=this.state


        let {data}=this.state
        return (
            <div>
                <Table bordered={true} pagination={{position:['bottomCenter'],defaultPageSize:7,hideOnSinglePage:true}}  dataSource={data} >
                    <Column title ='流水号' dataIndex='key' align="center"/>
                    <Column title ='条码' dataIndex='code' align="center"/>
                    <Column title ='商品名称' dataIndex='name' align="center" />
                    <Column title ='商品售价' dataIndex='price' align="center" render={(item)=>this.add(item)}
                            sorter={{
                                compare: (a, b) => a.price - b.price,
                                multiple: 2,}}
                    />
                    <Column title ='商品类别' dataIndex='classone' align="center"/>
                    <Column title ='操作' dataIndex='operate' render ={(text,recorder) =>this.operateCell(text,recorder)} align="center"/>
                </Table>
                {/*//修改框*/}
                <div>
                    <Modal
                        visible={visible}
                        title="修改商品信息"
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                        footer={[
                            <Button key="back" onClick={this.handleCancel}>
                                取消
                            </Button>,
                            <Button key="submit" type="primary" loading={loading} onClick={this.handleOk}>
                                提交
                            </Button>,
                        ]}>
                        <Form.Item label="* 流水号">
                            <Input placeholder="1120200756" disabled />
                        </Form.Item>
                        <Form.Item label="商品条码">
                            <Input placeholder="20200834" />
                        </Form.Item>
                        <Form.Item label="商品名称">
                            <Input placeholder="Richard" />
                        </Form.Item>
                        <Form.Item label="商品单位">
                            <Select>
                                <Select.Option value="包" selected>包</Select.Option>
                                <Select.Option value="套">套</Select.Option>
                                <Select.Option value="件">件</Select.Option>
                                <Select.Option value="个">个</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="商品售价">
                            <Input  placeholder="999" />
                        </Form.Item>
                        <Form.Item label="库存数量">
                            <Input placeholder="888" />
                        </Form.Item>
                        <Form.Item label="商品类别">
                            <Select>
                                <Select.Option value="日常用品">日常用品</Select.Option>
                                <Select.Option value="玩具">玩具</Select.Option>
                                <Select.Option value="饮料酒水">饮料酒水</Select.Option>
                                <Select.Option value="饰品">饰品</Select.Option>
                                <Select.Option value="家居">家居</Select.Option>
                            </Select>
                        </Form.Item>
                    </Modal>
                </div>
                {/*//查看*/}
                <div>
                    <Modal
                        visible={visible1}
                        title="查看商品信息"
                        onCancel={this.handleCancel1}>
                        <Form.Item label="* 流水号">
                            <Input placeholder="1120200756" disabled />
                        </Form.Item>
                        <Form.Item label="商品条码">
                            <Input placeholder="20200834" disabled />
                        </Form.Item>
                        <Form.Item label="商品名称">
                            <Input placeholder="Richard"  disabled/>
                        </Form.Item>
                        <Form.Item label="商品单位">
                            <Select disabled>
                                <Select.Option value="包" selected>包</Select.Option>
                                <Select.Option value="套">套</Select.Option>
                                <Select.Option value="件">件</Select.Option>
                                <Select.Option value="个">个</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="商品售价">
                            <Input  placeholder="999" disabled />
                        </Form.Item>
                        <Form.Item label="库存数量">
                            <Input placeholder="888" disabled />
                        </Form.Item>
                        <Form.Item label="商品类别">
                            <Select disabled>
                                <Select.Option value="日常用品">日常用品</Select.Option>
                                <Select.Option value="玩具">玩具</Select.Option>
                                <Select.Option value="饮料酒水">饮料酒水</Select.Option>
                                <Select.Option value="饰品">饰品</Select.Option>
                                <Select.Option value="家居">家居</Select.Option>
                            </Select>
                        </Form.Item>
                    </Modal>
                </div>
            </div>
        );
    }
}





export default ProductClass


